<template>
  <div>
    <!-- 用插槽变双标签 -->
    <van-search
      v-model="value"
      placeholder="请输入小区或地址"
      show-action
      @click.native="$router.push('/city')"
    >
      <template #label
        ><span>{{ city.label }}</span
        ><van-icon name="arrow-down" /> ｜</template
      >
      <template #action><van-icon name="location-o" size="20" /></template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in pictures" :key="item.id">
        <!-- <img :src="'http://liufusong.top:8080'+item.imgSrc" alt="" /> -->
        <van-image
          width="100%"
          height="100%"
          :src="'http://liufusong.top:8080' + item.imgSrc"
        />
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" class="house">
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="guide-o" text="地图找房" />
      <van-grid-item icon="home-o" text="去出租" />
    </van-grid>
    <van-cell-group>
      <van-cell title="租房小组" value="更多" />
    </van-cell-group>
    <!-- <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="item in houseArr" :key="item.id">
        <van-image :src="'http://liufusong.top:8080' + item.imgSrc" />
        <template #text>{{ item.desc }}</template>
      </van-grid-item>
    </van-grid> -->
    <van-grid :column-num="2" direction="horizontal" :gutter="10">
      <van-grid-item v-for="item in houseArr" :key="item.id"
        ><template #text>
          <div>
            <span>{{ item.desc }}</span>
            <br />
            <span>{{ item.title }}</span>
          </div>
        </template>
        <template #icon>
          <van-image
            width="50"
            height="50"
            :src="'http://liufusong.top:8080' + item.imgSrc"
          />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getPictures } from '@/api/picture.js'
import { getHouses } from '@/api/house'
export default {
  name: 'index-page',
  components: {},
  props: {},
  data() {
    return {
      value: '',
      pictures: [],
      houseArr: [],
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    // 发送ajax
    const res = await getPictures()
    console.log(res)
    this.pictures = res.body
    const res1 = await getHouses()
    console.log(res1)
    this.houseArr = res1.body
  },
  methods: {
    fn() {
      this.$router.path('/city')
    }
  }
}
</script>

<style scoped>
.van-search {
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 10px;
  background-color: transparent;
  /* background-color: #39a9ed; */
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 212px;
  /* background-color: #39a9ed; */
}
.houseinfo {
  display: block;
  width: 100%;
  height: 200px;
  background-color: pink;
}
.wap-home-o {
  width: 25%;
}
.van-image {
  width: 30%;
}
::v-deep .house {
  color: #45bb86;
}
</style>
